<template>
  <div class="app-container">
    <div class="info-title">
      <span>隐患排查基本信息</span>
      <router-link to="/prevent/hidden/troubleshooting/index" class="info-back">
        <el-button type="primary">返回列表</el-button>
      </router-link>
    </div>
    <el-row :gutter="12">
      <!--基本信息-->
      <el-col :span="8">
        <div class="info-header">
          <span>隐患排查清单名称:{{ checkListInfo.listName }}</span>
        </div>

        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">排查方式</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item">
              <span>排查方式:</span
              ><span>{{ parseCheckWay(checkListInfo.checkWay) }}</span>
            </div>
            <div class="info-item" style="height: 168px">
              <span>二维码:</span>
              <ul
                v-if="checkListInfo.checkWay == '2'"
                class="el-upload-list el-upload-list--picture-card"
                style="margin-left: 12px"
              >
                <li class="el-upload-list__item is-ready">
                  <img
                    class="el-upload-list__item-thumbnail"
                    @click="handlePictureCardPreview(checkListInfo.qrCodeUrl)"
                    :src="checkListInfo.qrCodeUrl"
                  />
                </li>
              </ul>
            </div>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">其他信息</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item">
              <span>创建人:</span><span>{{ checkListInfo.createdBy }}</span>
            </div>
            <div class="info-item">
              <span>创建时间:</span><span>{{ parseTime(checkListInfo.createdAt) }}</span>
            </div>
            <div class="info-item">
              <span>更新人:</span><span>{{ checkListInfo.updatedBy }}</span>
            </div>
            <div class="info-item">
              <span>更新时间:</span><span>{{ parseTime(checkListInfo.updatedAt) }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">基本信息</span>
            </div>
          </template>
          <div class="body">
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>排查类型:</span><span>{{ checkListInfo.checkTypeName }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>任务类型:</span
                  ><span>{{
                    checkListInfo.workType
                      ? parseWorkType(checkListInfo.workType)
                      : "----"
                  }}</span>
                </div>
              </el-col>
            </el-row>

            <div class="info-item">
              <span>排查人员/岗位:</span><span>{{ checkListInfo.userPostNames }}</span>
            </div>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>排查周期:</span>
                  <span>{{ parseCheckCycle(checkListInfo.checkCycleType) }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>工作日类型:</span>
                  <span>{{
                    checkListInfo.workDayType
                      ? parseWorkDayType(checkListInfo.workDayType)
                      : "----"
                  }}</span>
                </div>
              </el-col>
            </el-row>

            <el-row
              :gutter="12"
              v-if="
                checkListInfo.checkCycleType == 1 || checkListInfo.checkCycleType == 2
              "
            >
              <el-col :span="12">
                <div class="info-item">
                  <span>开始工作时间:</span>
                  <span>{{ checkListInfo.workStartTime }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>结束工作时间:</span>
                  <span>{{ checkListInfo.workEndTime }}</span>
                </div>
              </el-col>
            </el-row>

            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>排查开始日期:</span>
                  <span>{{ parseTime(checkListInfo.startDate) }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>排查结束日期:</span>
                  <span>{{ parseTime(checkListInfo.endDate) }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">排查内容</span>
            </div>
          </template>
          <div class="body">
            <el-row
              :gutter="12"
              class="demo-radius"
              v-for="(item, index) in checkListInfo.hiddenCheckMeasureList"
              :key="index"
            >
              <el-col :span="12">
                <div class="info-item">
                  <span>管控措施类型:</span><span>{{ checkListInfo.checkTypeName }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>管控措施类容:</span><span>{{ checkListInfo.userPostNames }}</span>
                </div>
              </el-col>
              <el-col :span="24" v-for="(obj, idx) in item.hiddenTroubleshootContentList">
                <div class="info-item">
                  <span>排查内容:</span><span>{{ obj.troubleshootContent }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--图片预览对话框-->
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<script setup name="CheckListInfo">
import { getCheckList } from "@/api/prevent/hidden/checkList";
import { listPeriod } from "@/api/prevent/hidden/period";
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const loading = ref(true);
const route = useRoute();
const checkListInfo = ref({});
const periodOption = ref([]); //隐患排查周期
const workTypeOptions = ref([
  {
    id: "0",
    label: "日常任务",
  },
  {
    id: "1",
    label: "主要负责人任务",
  },
  {
    id: "2",
    label: "技术负责人任务",
  },
  {
    id: "3",
    label: "操作负责人任务",
  },
]);
const workDayTypeOptions = ref([
  {
    id: "0",
    label: "每天",
  },
  {
    id: "1",
    label: "法定工作日",
  },
  {
    id: "2",
    label: "非法定节假日",
  },
]);
(() => {
  const listId = route.params && route.params.listId;
  if (listId) {
    loading.value = true;
    getCheckList(listId).then((response) => {
      getPeriodList();
      checkListInfo.value = response.data;
      loading.value = false;
    });
  }
})();
/** 预览图片 */
function handlePictureCardPreview(file) {
  dialogImageUrl.value = file;
  dialogVisible.value = true;
}
/** 处理排查周期数据 */
function parseCheckCycle(checkCycleType) {
  if (periodOption.value.length < 1) return "---";
  const itemTarget = periodOption.value.filter((item) => {
    return item.checkPeriodId == checkCycleType;
  });

  return itemTarget[0].checkPeriodName;
}

/** 处理排查任务类型数据 */
function parseWorkType(val) {
  const itemTarget = workTypeOptions.value.filter((item) => {
    return item.id == val;
  });

  return itemTarget[0].label;
}

/** 处理工作日类型数据 */
function parseWorkDayType(val) {
  const itemTarget = workDayTypeOptions.value.filter((item) => {
    return item.id == val;
  });
  return itemTarget[0].label;
}

/** 处理排查方式数据 */
function parseCheckWay(id) {
  if (id == 1 || id == "1") {
    return "无限制";
  } else {
    return "二维码排查";
  }
}
/** 获取隐患排查周期列表数据 */
async function getPeriodList() {
  listPeriod().then((response) => {
    periodOption.value = response.data;
  });
}
</script>
<style scoped lang="scss">
.info-title {
  height: 48px;
  width: 100%;
  padding: 0 18px;
  border-radius: 5px;
  background-color: #f6f8fa;
  color: #2c2c2c;
  margin: -6px 0 15px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  & .info-back {
    color: #0086ff;
  }
  & span {
    font-weight: 800;
  }
}
.info-header {
  width: 100%;
  height: 116px;
  background: url(./../../../../assets/prevent/total_bg.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 20px;
  & span:nth-child(1) {
    height: 33px;
    font-size: 24px;
    line-height: 33px;
    font-weight: 600;
    color: #fff;
    line-height: 33px;
  }
}
.info-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 42px;
  padding: 18px;
  margin-bottom: 8px;
  font-size: 12px;
  background-color: #f6f8fa;
  border-radius: 5px;
  &:hover {
    padding: 5px;
    font-size: 16px;
  }
  & span:nth-child(1) {
    font-weight: 800;
    color: #9e9e9e;
  }
  & span:nth-child(2) {
    margin-left: 20px;
    font-size: 14px;
  }
}
.demo-radius {
  width: 90%;
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
  margin: 20px;
  padding: 20px;
}
</style>
